<template>
	<view class="home">
		<view class="top_view">
			<u-navbar :title-bold="true" :border-bottom="false"
				:background="{ background: `rgba(251, 89, 4, ${scroll_top / 100})` }" :is-back="false" title=" ">
				<view class="navbar-title">
					<text>{{ enterprise.enterpriseName || '工作台' }}</text>
					<view class="switch-enterprise" @click="goPage('/pagesB/enterprise/index', 'reLaunch')">
						<u-icon name="arrow-down" size="22" color="#FFFFFF" class="arrow-icon"></u-icon>
					</view>
				</view>
				<view class="notice-btn" slot="right" @click="goPage('/pagesT/notice/notice')">
					<u-icon name="bell" size="28" color="#FFFFFF"></u-icon>
				</view>
			</u-navbar>

			<!-- 商品搜索框 -->
			<view class="search-box" @click="goToGoodsList">
				<view class="search-content">
					<u-icon name="search" size="32" color="#FFFFFF"></u-icon>
					<text class="search-placeholder">商品名称/编码/条码搜索</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 财务概况卡片 -->
			<view class="agent-task-card" v-if="$accessCheck($Access.overview)">
				<view class="agent-task-header">
					<view class="title-wrapper">
						<u-icon name="rmb-circle" color="#FB5904" size="36"></u-icon>
						<text class="agent-task-title">财务概况</text>
					</view>
				</view>

				<!-- 原财务概况数据 -->
				<view class="task-grid">
					<view class="task-row">
						<view class="task-item">
							<text class="task-item-value">¥{{ $utils.formatNub(now.totalShouldPay) }}</text>
							<text class="task-item-title">应付账款</text>
						</view>
						<view class="task-item">
							<text class="task-item-value">{{ Number(now.customerTotalNum) || 0 }}</text>
							<text class="task-item-title">当前客户数</text>
						</view>
						<view class="task-item">
							<text class="task-item-value">¥{{ $utils.formatNub(now.totalMoneyOfInventory) }}</text>
							<text class="task-item-title">库存总金额</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单&数据卡片 -->
			<view class="sales-data-card" v-if="$accessCheck($Access.overview)">
				<view class="sales-data-header">
					<view class="title-wrapper">
						<u-icon name="order" color="#4A89DC" size="36"></u-icon>
						<text class="sales-data-title">订单 & 数据</text>
					</view>
				</view>

				<!-- 原订单&数据字段 -->
				<view class="sales-grid">
					<view class="sales-row">
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.todayConfirmedOrderNum }}</text>
							<text class="sales-item-title">今日订单</text>
						</view>
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.todayConfirmedOrderCustomerNum }}</text>
							<text class="sales-item-title">下单客户</text>
						</view>
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.customerAverageMoney }}</text>
							<text class="sales-item-title">今日客单价</text>
						</view>
					</view>
					<view class="sales-row">
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.orderNumOfNotOutOfStock }}</text>
							<text class="sales-item-title">未出库订单</text>
						</view>
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.orderTotalMoney }}</text>
							<text class="sales-item-title">下单金额</text>
						</view>
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.orderConfirmedMoney }}</text>
							<text class="sales-item-title">营业金额</text>
						</view>
					</view>
					<view class="sales-row">
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.todayGrossProfit }}</text>
							<text class="sales-item-title">今日毛利</text>
						</view>
						<view class="sales-item">
							<text class="sales-item-value">{{ businessOverview.todayReceivedMoney }}</text>
							<text class="sales-item-title">今日收款</text>
						</view>
						<view class="sales-item" style="visibility: hidden;">
							<text class="sales-item-value">0</text>
							<text class="sales-item-title">占位</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的应用 -->
			<view class="card-container app-card-container">
				<view class="card-header">
					<text class="card-title">我的应用</text>
					<view class="more-btn" @click="goPage('/pagesB/app/openindex')">
						<text class="more-text">更多</text>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
				<view class="app-grid">
					<block v-for="(appGroup, groupIndex) in filteredNavList" :key="groupIndex">
						<view class="app-item" v-for="(app, index) in appGroup" :key="index + '-' + groupIndex"
							@click="goPage((appGroup[index]).url)">
							<view class="app-icon" :style="{ background: app.color }">
								<text :class="[app.icon]" class="custom-icon"></text>
							</view>
							<text class="app-name">{{ app.label }}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<u-popup v-model="noticePop" border-radius="18" mode="center" height="905" :custom-style="{
			background: 'rgba(0,0,0,0)'
		}">
			<view class="mag-view">
				<view class="mag-top">
					<image class="notice-i" src="../../static/img/notice-i.png" mode=""></image>
				</view>
				<view class="msg-cont">
					<image class="msg-yun" src="../../static/img/notice-bg.png" mode=""></image>
					<view class="mag-tit">{{ notice_data.title }}</view>
					<scroll-view class="mag-main" scroll-y>{{ notice_data.content }}</scroll-view>
				</view>
				<view class="confirm-btn" @click="noticePop = false">我知道了</view>
			</view>
		</u-popup>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	data() {
		return {
			tabbar_current: 0,
			notice_data: {
				title: '',
				content: ''
			},
			noticePop: false,
			shopData: '',
			ranking: [],
			now: {}, //
			type: true,
			businessOverview: {},
			active: false,
			rank_on: 1,
			list: ['快销品', '包装食品', '饼干糕点', '保健品', '营养保健品', '速冻面店', '办公器材', '美容化妆'],
			tag: [
				{
					value: 1,
					label: '类目排行',
					active: true
				},
				{
					value: 2,
					label: '商品排行',
					active: false
				},
				{
					value: 3,
					label: '客户排行',
					active: false
				},
				{
					value: 4,
					label: '供应商排行',
					active: false
				}
			],
			chartData: {
				categories: [],
				series: []
			},
			tabs_current: 0,
			tabs_list: [
				{
					name: '订单金额'
				},
				{
					name: '客户统计'
				},
				{
					name: '资金统计'
				},
				{
					name: '订单数'
				}
			],
			ranking_sel: 1,
			nav_list: [
				[
					{
						url: '/pages/order/OrderAdd',
						label: '开单',
						icon: 'custom-icon-piliangxiadan',
						color: '#FB5904',
						access: 'OrderAdd'
					},
					{
						url: '/pagesT/stock/SalesOrder',
						label: '出库单',
						icon: 'custom-icon-quehuoshangpinshu',
						color: '#FB5904',
						access: 'InventoryOut'
					},
					{
						url: '/pagesT/customer/StaffList',
						label: '销售排行',
						icon: 'custom-icon-paihangbang',
						color: '#FB5904',
						access: 'salesRanking'
					},
					{
						url: '/pagesT/customer/CommunicationLogs',
						label: '客户拜访',
						icon: 'custom-icon-fuwu',
						color: '#FB5904',
						access: 'CustomerListvisitedLogs'
					}
				]
			],
			scroll_top: 0
		};
	},
	onPageScroll(e) {
		this.scroll_top = e.scrollTop;
	},
	components: {
		uniStatusBar
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		userInfo() {
			return this.$store.state.userInfo;
		},
		enterprise() {
			return this.$store.state.enterprise;
		},
		// 添加过滤后的应用列表计算属性
		filteredNavList() {
			if (!this.nav_list || !this.nav_list.length) return [];

			return this.nav_list.map(group => {
				if (!Array.isArray(group)) return [];
				return group.filter(app => this.$accessCheck(this.$Access[app.access]));
			});
		},
		// 当前排行榜列表
		currentRankingList() {
			if (!this.ranking) return [];

			switch (this.rank_on) {
				case 1: return this.ranking.categoryRanking || [];
				case 2: return this.ranking.goodsRanking || [];
				case 3: return this.ranking.customerRanking || [];
				case 4: return this.ranking.supplierRanking || [];
				default: return [];
			}
		}
	},
	watch: {
		shopData(val) { }
	},
	async onLoad() {
		// this.noticePop=true
		if (!this.hasLogin) {
			this.logout();
			return;
		}
		await this.overview();
		await this.getupStatusAnnouncementInfo();
		await this.getBasicSetup();
	},
	async onShow() {
		await this.getCommonAppInfo();
	},
	async onPullDownRefresh() {
		await this.overview();
		await this.getupStatusAnnouncementInfo();
		await this.getBasicSetup();
	},
	onShareAppMessage(res) { },
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		// 跳转到商品列表页面
		goToGoodsList() {
			this.goPage('/pagesB/goods/index?fromIndex=true');
		},
		setChartData(timeData, orderMoney, goodsNum, orderNum) {
			this.chartData = {
				categories: timeData,
				series: [
					{
						name: '金额',
						data: orderMoney,
						// pointShape: 'circle',
						legendShape: 'line'
					},
					{
						name: '商品数量',
						data: goodsNum,
						// pointShape: 'circle',
						legendShape: 'line'
					},
					{
						name: '订单数量',
						data: orderNum,
						// pointShape: 'circle',
						legendShape: 'line'
					}
				]
			};
		},
		changeTag(val) {
			this.rank_on = val;
		},
		changeSel(val) {
			this.ranking_sel = val;
			this.overview();
		},
		async overview(isReset) {
			if (isReset) {
				uni.showLoading({
					title: '加载中...'
				});
			}
			await this.$u.api
				.overview({
					ranking: this.ranking_sel, // "1销量排行 2销额排行",
					businessOverviewShopId: '', // "经营概况按店铺筛选：为空则筛选全店",
					categoryRankingShopId: '', // "类目排行按店铺筛选：为空则筛选全店",
					goodsRankingShopId: '', // "商品排行按店铺筛选：为空则筛选全店",
					supplierRankingShopId: '' // 供应商排行按店铺筛选：为空则筛选全店"
				})
				.then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					this.businessOverview = res.data.businessOverview;
					this.now = res.data.aggregateStatistics;
					this.ranking = res.data.ranking;
					// 趋势图数据保留，但不再显示
					const timeData = [];
					const goodsNumData = [];
					const orderMoneyData = [];
					const orderNumData = [];
					this.$nextTick(() => {
						res.data.chartData.forEach(value => {
							const arr = value.date.split('-');
							timeData.push(arr[1] + '-' + arr[2]);
							goodsNumData.push(Number(value.goodsNum));
							orderMoneyData.push(Number(value.orderMoney));
							orderNumData.push(Number(value.orderNum));
						});
						this.setChartData(timeData, orderMoneyData, goodsNumData, orderNumData);
					});
				})
				.catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
		},
		async getupStatusAnnouncementInfo() {
			await this.$u.api.getupStatusAnnouncementInfo().then(res => {
				if (res.data.upStatus === 5) {
					this.noticePop = true;
					this.notice_data.title = res.data.title;
					this.notice_data.content = res.data.content;
				} else {
					this.noticePop = false;
				}
			});
		},
		async getCommonAppInfo() {
			await this.$u.api.getCommonAppInfo(this.userInfo.userCenterId).then(res => {
				if (res.data.jsonKey) {
					const jsonKey = res.data.jsonKey;
					if (jsonKey[0].icon.indexOf('ibon') > -1) {
						return;
					}
					//可对一个数进行上舍入
					let num = Math.ceil(jsonKey.length / 8);
					let arr = [];
					for (let i = 0; i < num; i++) {
						arr[i] = jsonKey.slice(i * 8, i * 8 + 8);
					}
					// 更新工作台图标颜色为主题色
					if (arr.length > 0) {
						arr.forEach(group => {
							group.forEach(item => {
								item.color = '#FB5904';
							});
						});
					}
					this.nav_list = arr;
				}
			});
		},
		// 获取基本设置
		async getBasicSetup() {
			await this.$u.api.getBasicSetup().then(res => {
				if (res.data.basicData) {
					this.$store.commit('commit_basicSet', res.data.basicData);
				}
				this.$store.commit('setStorage', res.data.storage);
			});
		},
		// 获取排行榜项目名称
		getRankingItemName(item) {
			switch (this.rank_on) {
				case 1: return item.categoryName || '未分类';
				case 2: return item.goodsName || '未命名';
				case 3: return item.customerName || '未命名';
				case 4: return item.supplierName || '未命名';
				default: return '';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.more-btn {
	padding: 8rpx;
	display: flex;
	align-items: center;

	.more-text {
		font-size: 26rpx;
		color: #999999;
		margin-right: 4rpx;
	}
}

.charts-box {
	width: 710rpx;
	height: 530rpx;
	padding: 24rpx 24rpx 0 0;
	background-color: #ffffff;
}

.show {
	color: #2d405e;
}

.home {
	font-family: DIN-Medium;
	background-color: #f5f7fa;

	.navbar-title {
		display: flex;
		padding-left: 32rpx;
		align-items: center;
		justify-content: center;

		text {
			font-size: 32rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.switch-enterprise {
			display: inline-flex;
			align-items: center;
			padding: 0 4rpx;
			margin-left: 8rpx;

			.arrow-icon {
				margin-top: 4rpx;
			}
		}
	}

	.notice-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.top_view {
		padding: 0 32rpx 50rpx;
		background: linear-gradient(180deg, #FB5904, #FB7A37, #FF8F59, #f5f5f6 100%);
	}

	.content {
		transform: translateY(-30rpx);
		padding: 0 24rpx;

		/* 代办事项卡片样式 */
		.agent-task-card {
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 24rpx;
			overflow: hidden;

			.agent-task-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 30rpx;
				border-bottom: 1px solid #f5f5f5;

				.title-wrapper {
					display: flex;
					align-items: center;

					.agent-task-title {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						margin-left: 12rpx;
					}
				}
			}

			.task-grid {
				padding: 15rpx 8rpx;

				.task-row {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.task-item {
						width: 31%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 30rpx 0;
						background-color: #FFF9F5;
						border-radius: 8rpx;
						margin: 8rpx 0;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

						&:nth-child(odd) {
							background-color: #FFF9F5;
						}

						&:nth-child(even) {
							background-color: #FFFBF8;
						}

						.task-item-value {
							font-size: 34rpx;
							color: #333333;
							font-weight: 600;
							font-family: DIN-Medium;
							margin-bottom: 12rpx;
						}

						.task-item-title {
							font-size: 28rpx;
							color: #666666;
						}
					}
				}
			}
		}

		/* 销售数据卡片样式 */
		.sales-data-card {
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 24rpx;
			overflow: hidden;

			.sales-data-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 30rpx;
				border-bottom: 1px solid #f5f5f5;

				.title-wrapper {
					display: flex;
					align-items: center;

					.sales-data-title {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						margin-left: 12rpx;
					}
				}
			}

			.sales-grid {
				padding: 15rpx 8rpx;

				.sales-row {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.sales-item {
						width: 31%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 30rpx 0;
						background-color: #F0F7FF;
						border-radius: 8rpx;
						margin: 8rpx 0;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

						&:nth-child(odd) {
							background-color: #F0F7FF;
						}

						&:nth-child(even) {
							background-color: #F5FAFF;
						}

						.sales-item-value {
							font-size: 34rpx;
							color: #333333;
							font-weight: 600;
							font-family: DIN-Medium;
							margin-bottom: 12rpx;
						}

						.sales-item-title {
							font-size: 28rpx;
							color: #666666;
						}
					}
				}
			}
		}

		.card-container {
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 24rpx;
			overflow: hidden;

			.card-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
				border-bottom: 1px solid #f5f5f5;

				.card-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.edit-btn {
					padding: 8rpx;
				}
			}

			/* 应用网格 */
			.app-grid {
				display: flex;
				flex-wrap: wrap;
				padding: 24rpx 12rpx;

				.app-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 16rpx 0;

					.app-icon {
						width: 90rpx;
						height: 90rpx;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 12rpx;

						.custom-icon {
							font-size: 48rpx;
							color: #ffffff;
						}
					}

					.app-name {
						font-size: 26rpx;
						color: #333333;
						max-width: 120rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}

		// 为不同卡片添加不同的渐变色边框
		.app-card-container {
			border-top: 4rpx solid transparent;
		}
	}
}

.cont {
	.swiper {
		width: 710rpx;
		height: 400rpx;

		.app-ul {
			padding: 40rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			background-color: #ffffff;
			height: 400rpx;

			.app-li {
				text-align: center;
				width: 25%;
				margin-bottom: 40rpx;

				.icon-view {
					width: 72rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 12rpx;
					margin: 0 auto;

					.custom-icon {
						font-size: 42rpx;
						color: #ffffff;
					}
				}

				.label {
					font-size: 26rpx;
					line-height: 36rpx;
					padding-top: 16rpx;
					color: #333333;
				}
			}
		}
	}
}

.progress-ul {
	padding-bottom: 40rpx;

	.progress-li {
		line-height: 90rpx;

		.label {
			width: 152rpx;
			text-align: right;
			border-right: 1px solid #dddddd;
			padding-right: 12rpx;
			color: #333333;
			font-size: 24rpx;
			font-weight: 400;
		}

		.line {
			width: 400rpx;
		}

		.num {
			color: #FB5904;
			font-size: 26rpx;
			font-weight: 500;
			margin-right: 30rpx;
		}
	}
}

.mag-view {
	text-align: center;
	transform: translateY(100rpx);
	background-color: #ffffff;
	width: 612rpx;
	border-radius: 18rpx;
	padding-bottom: 46rpx;

	.mag-top {
		height: 242rpx;
		border-radius: 18rpx 18rpx 0 0;
		background-color: $uni-color-primary;
		width: 100%;
		position: relative;

		.notice-i {
			width: 422rpx;
			height: 312rpx;
			position: absolute;
			top: -100rpx;
			left: 95rpx;
		}
	}

	.msg-cont {
		padding: 0 50rpx;
		padding-top: 56rpx;
		position: relative;

		.msg-yun {
			position: absolute;
			width: 622rpx;
			height: 215rpx;
			left: 0;
			top: -116rpx;
			z-index: 1;
		}

		.mag-main {
			height: 200rpx;
		}

		.mag-tit {
			position: relative;
			z-index: 9;
			font-size: 38rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
	}

	.confirm-btn {
		line-height: 90rpx;
		height: 90rpx;
		font-size: 34rpx;
		width: 506rpx;
		margin: 30rpx auto 0;
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 12rpx;
		background-color: #ffffff;
	}
}

.search-box {
	padding: 20rpx 32rpx;
	margin-top: 20rpx;
	z-index: 10;

	.search-content {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 40rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			background-color: rgba(255, 255, 255, 0.25);
		}

		.search-placeholder {
			font-size: 28rpx;
			color: #ffffff;
			margin-left: 16rpx;
			opacity: 0.9;
		}
	}
}
</style>
